<template>
  <div class="custom-node">
    <h3>{{ name }}</h3>
    <p>Progress: {{ percentage }}%</p>
  </div>
</template>

<script>
export default {
  name: 'CustomNode',
  inject: ['getNode', 'getGraph'],
  data() {
    return {
      name: 'Vue2 Node',
      percentage: 0,
    }
  },
  mounted() {
    const node = this.getNode()
    const graph = this.getGraph()

    node.on('change:data', ({ current }) => {
      this.percentage = current.progress
    })

    setInterval(() => {
      const { progress = 0 } = node.getData()
      node.setData({
        progress: (progress + 10) % 100,
      })
    }, 2000)
  }
}
</script>

<style scoped>
.custom-node {
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
}
</style>